<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <title>boost 搜索引擎</title>
    <style>
        /* 去掉网页中的默认内外边距 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 设置全屏背景图片 */
        body {
            height: 100vh;
            background-image: url('./lhd.png');
            /* 替换为你的背景图片链接 */
            background-size: cover;
            /* 背景图片拉伸至全屏 */
            background-position: center;
            /* 居中显示 */
            background-repeat: no-repeat;
            /* 不重复 */
            font-family: Arial, sans-serif;
            background-attachment: fixed;
        }

        /* 主容器样式 */
        .container {
            width: 90%;
            max-width: 800px;
            margin: 50px auto;
            /* 居中 */
            text-align: center;
        }

        /* 搜索框样式 */
        .container .search {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            /* 输入框和按钮的间距 */
            flex-wrap: wrap;
            /* 在小屏幕上允许换行 */
        }

        /* 输入框样式 */
        .container .search input {
            flex: 1;
            min-width: 200px;
            height: 60px;
            /* 将高度从 50px 调整为 60px */
            border: 1px solid #ccc;
            border-radius: 8px;
            padding-left: 15px;
            /* 增加内边距，让内容看起来更舒适 */
            font-size: 18px;
            /* 将字体大小从 16px 调整为 18px */
            color: #333;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .container .search input:focus {
            border-color: #4e6ef2;
            /* 聚焦时高亮边框 */
        }

        /* 搜索按钮样式 */
        .container .search button {
            width: 150px;
            height: 52px;
            background: linear-gradient(90deg, #4e6ef2, #3a58c8);
            /* 渐变背景 */
            border: none;
            border-radius: 8px;
            /* 圆角 */
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease;
            /* 动画效果 */
        }

        .container .search button:hover {
            background: linear-gradient(90deg, #3a58c8, #4e6ef2);
            /* 倒转渐变色 */
            transform: scale(1.05);
            /* 鼠标悬停时稍微放大 */
        }

        /* 搜索结果样式 */
        .container .result {
            margin-top: 20px;
            width: 100%;
            text-align: left;
        }

        .container .result .item {
            margin-top: 15px;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.8);
            /* 半透明背景 */
            border-radius: 8px;
            /* 圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        .container .result .item a {
            display: block;
            text-decoration: none;
            font-size: 20px;
            color: #4e6ef2;
            transition: color 0.3s ease;
        }

        .container .result .item a:hover {
            text-decoration: underline;
            color: #3a58c8;
        }

        .container .result .item p {
            margin-top: 5px;
            font-size: 16px;
            color: #333;
        }

        .container .result .item i {
            display: block;
            font-style: normal;
            color: green;
            margin-top: 5px;
            font-size: 14px;
            white-space: nowrap;
            /* 强制不换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
            max-width: 300px;
            /* 设置最大宽度 */
        }

        /* 响应式布局 */
        @media (max-width: 768px) {
            .container .search input {
                min-width: 150px;
                height: 55px;
                /* 中等屏幕调整为 55px */
                font-size: 16px;
            }


            .container .search button {
                width: 120px;
                height: 48px;
                font-size: 16px;
            }

            .container .result .item a {
                font-size: 18px;
            }

            .container .result .item p {
                font-size: 14px;
            }

            .container .result .item i {
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {
            .container .search input {
                width: 100%;
                height: 50px;
                /* 小屏幕调整为 50px */
                font-size: 14px;
                /* 字体稍微减小 */
            }

            .container .search input {
                width: 100%;
                /* 输入框占满容器 */
            }

            .container .search button {
                width: 100%;
                /* 按钮占满容器 */
            }

            .container .result .item {
                padding: 10px;
            }

            .container .result .item a {
                font-size: 16px;
            }

            .container .result .item p {
                font-size: 12px;
            }
        }

        /* 正在搜索的圈圈样式 */
        #loading {
            font-weight: bold;
            font-size: 24px;
            /* 稍大字体，更显眼 */
            color: #4e6ef2;
            background: linear-gradient(90deg, #4e6ef2, #74b9ff);
            /* 渐变文字效果 */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /* 实现文字透明，显示背景 */
            text-shadow: 2px 2px 8px rgba(78, 110, 242, 0.5),
                /* 柔和的高亮阴影 */
                -2px -2px 10px rgba(255, 255, 255, 0.3);
            /* 淡弱的发光效果 */
            animation: pulse 1.8s infinite ease-in-out;
            /* 更平滑的动画间隔 */
            display: inline-block;
            /* 确保动画效果只作用于文字部分 */
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
                filter: brightness(0.9);
                /* 初始和结束时稍微暗一点 */
            }

            50% {
                transform: scale(1.15);
                /* 放大效果更明显 */
                filter: brightness(1.2);
                /* 中间点亮 */
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="search">
            <input type="text" placeholder="请输入搜索关键字">
            <button onclick="Search()">搜索一下</button>
        </div>
        <div class="result">
            <!-- 动态生成网页内容 -->
        </div>
    </div>
    <script>
        function hideLoading() {
            // 隐藏正在搜索的圈圈
            $("#loading").remove();
        }
        function showLoading() {
            // 创建并显示正在搜索的圈圈
            let loading = $("<div>", {
                id: "loading",
                text: "正在搜索...",
                style: "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; color: #4e6ef2; text-align: center; z-index: 9999;"
            });
            $("body").append(loading);
        }
        function Search() {
            let query = $(".container .search input").val(); // 获取输入内容
            console.log("query = " + query);
            showLoading();
            // 发起 AJAX 请求
            $.ajax({
                type: "GET",
                url: "/s?word=" + query,
                success: function (data) {
                    console.log(data);
                    hideLoading(); // 隐藏正在搜索的圈圈
                    BuildHtml(data);
                },
                error: function () {
                    hideLoading(); // 隐藏正在搜索的圈圈
                    alert("搜索失败，请稍后重试！");
                }
            });
        }

        function BuildHtml(data) {
            let resultLabel = $(".container .result");
            resultLabel.empty(); // 清空历史结果

            if (data.length === 0) {
                // 如果搜索结果为空，显示提示信息
                let noResultLabel = $("<p>", {
                    text: "没有找到相关搜索结果。",
                    style: "color: red; font-size: 18px; text-align: center;"
                });
                noResultLabel.appendTo(resultLabel);
            } else {
                // 正常显示搜索结果
                for (let elem of data) {
                    let aLabel = $("<a>", {
                        text: elem.title,
                        href: elem.url,
                        target: "_blank"
                    });
                    let pLabel = $("<p>", {
                        text: elem.desc
                    });
                    let iLabel = $("<i>", {
                        text: elem.url
                    });
                    let divLabel = $("<div>", {
                        class: "item"
                    });

                    aLabel.appendTo(divLabel);
                    pLabel.appendTo(divLabel);
                    iLabel.appendTo(divLabel);
                    divLabel.appendTo(resultLabel);
                }
            }
        }
    </script>

    <body>
        <script>
            document.querySelector(".container .search input").addEventListener("keydown", function (event) {
                if (event.key === "Enter") { // 检测是否按下回车键
                    event.preventDefault(); // 防止默认行为（如表单提交）
                    Search(); // 调用搜索函数
                }
            });
            function clickEffect() {
                let balls = [];
                let longPressed = false;
                let longPress;
                let multiplier = 0;
                let width, height;
                let origin;
                let normal;
                let ctx;
                const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
                const canvas = document.createElement("canvas");
                document.body.appendChild(canvas);
                canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
                const pointer = document.createElement("span");
                pointer.classList.add("pointer");
                document.body.appendChild(pointer);

                if (canvas.getContext && window.addEventListener) {
                    ctx = canvas.getContext("2d");
                    updateSize();
                    window.addEventListener('resize', updateSize, false);
                    loop();
                    window.addEventListener("mousedown", function (e) {
                        pushBalls(randBetween(10, 20), e.clientX, e.clientY);
                        document.body.classList.add("is-pressed");
                        longPress = setTimeout(function () {
                            document.body.classList.add("is-longpress");
                            longPressed = true;
                        }, 500);
                    }, false);
                    window.addEventListener("mouseup", function (e) {
                        clearInterval(longPress);
                        if (longPressed == true) {
                            document.body.classList.remove("is-longpress");
                            pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
                            longPressed = false;
                        }
                        document.body.classList.remove("is-pressed");
                    }, false);
                    window.addEventListener("mousemove", function (e) {
                        let x = e.clientX;
                        let y = e.clientY;
                        pointer.style.top = y + "px";
                        pointer.style.left = x + "px";
                    }, false);
                } else {
                    console.log("canvas or addEventListener is unsupported!");
                }


                function updateSize() {
                    canvas.width = window.innerWidth * 2;
                    canvas.height = window.innerHeight * 2;
                    canvas.style.width = window.innerWidth + 'px';
                    canvas.style.height = window.innerHeight + 'px';
                    ctx.scale(2, 2);
                    width = (canvas.width = window.innerWidth);
                    height = (canvas.height = window.innerHeight);
                    origin = {
                        x: width / 2,
                        y: height / 2
                    };
                    normal = {
                        x: width / 2,
                        y: height / 2
                    };
                }
                class Ball {
                    constructor(x = origin.x, y = origin.y) {
                        this.x = x;
                        this.y = y;
                        this.angle = Math.PI * 2 * Math.random();
                        if (longPressed == true) {
                            this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
                        } else {
                            this.multiplier = randBetween(6, 12);
                        }
                        this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
                        this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
                        this.r = randBetween(8, 12) + 3 * Math.random();
                        this.color = colours[Math.floor(Math.random() * colours.length)];
                    }
                    update() {
                        this.x += this.vx - normal.x;
                        this.y += this.vy - normal.y;
                        normal.x = -2 / window.innerWidth * Math.sin(this.angle);
                        normal.y = -2 / window.innerHeight * Math.cos(this.angle);
                        this.r -= 0.3;
                        this.vx *= 0.9;
                        this.vy *= 0.9;
                    }
                }

                function pushBalls(count = 1, x = origin.x, y = origin.y) {
                    for (let i = 0; i < count; i++) {
                        balls.push(new Ball(x, y));
                    }
                }

                function randBetween(min, max) {
                    return Math.floor(Math.random() * max) + min;
                }

                function loop() {
                    ctx.fillStyle = "rgba(255, 255, 255, 0)";
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    for (let i = 0; i < balls.length; i++) {
                        let b = balls[i];
                        if (b.r < 0) continue;
                        ctx.fillStyle = b.color;
                        ctx.beginPath();
                        ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
                        ctx.fill();
                        b.update();
                    }
                    if (longPressed == true) {
                        multiplier += 0.2;
                    } else if (!longPressed && multiplier >= 0) {
                        multiplier -= 0.4;
                    }
                    removeBall();
                    requestAnimationFrame(loop);
                }

                function removeBall() {
                    for (let i = 0; i < balls.length; i++) {
                        let b = balls[i];
                        if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
                            balls.splice(i, 1);
                        }
                    }
                }
            }
            clickEffect();//调用特效函数
        </script>
    </body>

</body>

<body>
    <div class="container">
        <!-- 搜索框和内容 -->
    </div>

    <script>
        // 检测设备类型并设置背景图片
        function setBackgroundImage() {
            if (window.innerWidth <= 768) {
                // 手机端
                document.body.style.backgroundImage = "url('./android.png')";
            } else {
                // 电脑端
                document.body.style.backgroundImage = "url('./windows2.png')";
            }
        }

        // 调用函数设置背景图片
        setBackgroundImage();

        // 在窗口大小改变时重新设置背景图片
        window.addEventListener('resize', setBackgroundImage);
    </script>
</body>

</html>